<template>
  <div>
    <table style="margin-left: 30px; font-size:12px;table-layout:fixed;line-height:30px;">
      <tbody>
        <tr>
          <td colspan="10" style="height:10px"></td>
        </tr>
        <tr>
          <td style="width:90px;color:#888">监控项名称:</td>
          <td style="font-size:14px; word-break: keep-all;">
            <span style="font-size:18px">{{showItem.name}}</span>
          </td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td style="width:90px;color:#888">监测频率:</td>
          <td style="font-size:14px; width: 90px; word-break: keep-all;">
            <span style="font-size:18px">{{showItem.delay}}</span>秒</td>
          <td style="width:90px;color:#888">任务计划:</td>
          <td style="font-size:16px; word-break: keep-all;">{{showItem.delayFlex}}</td>
        </tr>
        <tr>
          <td style="width:90px;color:#888">最新数据时间:</td>
          <td style="font-size:18px; width: 210px; word-break: keep-all;">{{showItem.lastTime}}</td>
          <td style="width:90px;color:#888">最新数据:</td>
          <td style="font-size:18px; width: 210px; word-break: keep-all;">{{showItem.lastValue}}</td>
        </tr>
      </tbody>
    </table>
    <table class="detailtable" style=" font-size:12px;margin-top:20px;">
      <caption style="font-size:18px;color:#322d35;padding-bottom:30px;">今日告警 (<span id="alCount">{{pagination.total}}</span>)</caption>
      <thead>
        <tr>
          <th style="width:20%;line-height:24px">
            <i class="WarningLeftIcon WarningLeftIconOpen" style="margin:0px 16px 0px 0px;display:none;"></i>告警时间</th>
          <th style="width:20%;line-height:24px">告警名称</th>
          <th style="width:20%;line-height:24px">状态</th>
          <th style="width:20%;line-height:24px">发送方式</th>
          <th style="width:20%;line-height:24px">备注</th>
        </tr>
      </thead>
      <tbody>
            <tr align="center" v-for="(row,index) in pagination.rows"  v-if="pagination.total>0">
              <td style="word-break : break-all; color:#333e50">{{row.clock}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.name}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.status}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.sendWay}}</td>
              <td style="word-break : break-all; color:#333e50">{{row.error}}</td>
            </tr>
            <tr  v-if="!pagination.total">
              <td style="word-break : break-all; color:#333e50" colspan="5">暂无数据</td>
            </tr>
      </tbody>
    </table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
import topoApi from "api/topo.js";
import eventHubs from "common/eventHubs";
export default {
  name: "itemSummary",
  data() {
    return {
      item: {},
      showItem: {
        itemid: "...",
        name: "...",
        delay: "...",
        delayFlex: "...",
        lastTime: "...",
        lastValue: "..."
      },
      params: {
        timefrom: 0,
        timetill: 0,
        isPage: true
      },
      pagination: {
        rows: [],
        pageSizes: [20, 30, 50, 100, 200, 500],
        pageSize: 20,
        page: 1,
        total: 0
      }
    };
  },
  created() {
    const self = this;
    //接受item改变的事件
    eventHubs.getEventHub().$on("itemChanged", data => {
      self.item = data
      self.getSummaryData()
      self.getAlertData()
    });
  },
  methods: {
    initPagination() {
      const self = this;
      self.pagination.rows = [];
      self.pagination.page = 1;
      self.pagination.pageSize = 20;
      self.pagination.total = 0;
    },
    handleSizeChange(val) {
      const self = this;
      self.pagination.pageSize = val;
      self.getAlertData();
    },
    handleCurrentChange(val) {
      const self = this;
      self.pagination.page = val;
      self.getAlertData();
    },
    getParams() {
      const self = this;
      let endDate = new Date(),
          year = endDate.getFullYear(),
          month = endDate.getMonth() + 1,
          day = endDate.getDate(),
          startDate = new Date(year + "/" + month + "/" + (day))
      self.params.timefrom = Math.floor(startDate.getTime() / 1000);
      self.params.timetill = Math.ceil(endDate.getTime() / 1000);
    },
    getSummaryData() {
      const self = this;
      if (self.item) {
        //获取主机的监控项数据
        topoApi
          .queryItemById(self.item.itemid)
          .then(resp => {
            let item = resp.data;
            self.showItem.itemid = item.itemid ? item.itemid : "";
            self.showItem.name = item.name ? item.name : "";
            self.showItem.delay = item.delay ? item.delay : "30";
            self.showItem.delayFlex = item.delayFlex ? item.delayFlex : "无";
            self.showItem.lastTime = item.lastTime ? item.lastTime : "无";
            self.showItem.lastValue = item.lastValue ? item.lastValue : "无";
          })
          .catch(err => {
            console.error(err);
            self.$message(err);
          });
      }
    },
    getAlertData() {
      const self = this;
      self.getParams();
      topoApi
        .itemAlert(
          self.item.itemid,
          self.params.timefrom,
          self.params.timetill,
          {
            isPage: self.params.isPage,
            page: self.pagination.page,
            pageSize: self.pagination.pageSize
          }
        )
        .then(resp => {
          let data = resp.data;
          if (data) {
            self.pagination.rows = data.rows;
            self.pagination.page = data.page;
            self.pagination.pageSize = data.pageSize;
            self.pagination.total = data.total;
          } else {
            self.initPagination();
          }
        })
        .catch(err => {
          console.error(err);
          self.$message(err);
        });
    }
  }
};
</script>
<style scoped>
.detailtable {
  border-bottom: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 50px 0 0 15px;
  font-size: 12px;
  table-layout: fixed;
  line-height: 30px;
}

.detailtable > thead > tr > th,
.detailtable > tbody > tr > th,
.detailtable > tfoot > tr > th,
.detailtable > thead > tr > td,
.detailtable > tbody > tr > td,
.detailtable > tfoot > tr > td {
  /* border-top: 1px solid #dddddd; */
  font-size: 12px !important;
  vertical-align: middle !important;
  text-align: left;
  color: #333e50;
}

.detailtable > thead > tr > th {
  border-bottom: 1px solid #dddddd;
  font-weight: bold;
  font-size: 14px !important;
  vertical-align: middle;
  text-align: left;
}

.detailtable tr {
  height: 47px;
  line-height: 47px;
  border-bottom: 1px solid #ddd;
}

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}

.item_table {
  margin: 0px;
  padding: 0px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  display: table;
}

.item_table tr {
  height: 47px;
  line-height: 47px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.item_table > thead > tr > th,
.item_table > tbody > tr > th,
.item_table > tfoot > tr > th,
.item_table > thead > tr > td,
.item_table > tbody > tr > td,
.item_table > tfoot > tr > td {
  border-top: 1px solid #dddddd;
  font-size: 12px !important;
  vertical-align: middle !important;
  text-align: left;
  color: #333e50;
}
</style>
